<template>
    <div :class="`server-type-item ${mode}`" @click="clickAction">
        <div class="type-label title-color">{{label}}</div>
        <MiniIcon class="right-icon" name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'ServerTypeItem', // 服务类型项
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        label: String,
    },
    methods: {
        clickAction() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
.server-type-item {
    .flex();
    .mode-white();
    .m-h(@shop-bag-gap);
    .p-h(@shop-bag-gap);
    height: 52px;
    border-radius: @border-radius;
    justify-content: space-between;
    align-items: center;
    .m-b(@shop-bag-gap);
    box-shadow: 0px 4px 16px -4px rgba(51, 51, 51, 0.06);
    .type-label {
        font-size: @font-size;
        color: @text-color;
    }
    .right-icon {
        opacity: .7;
    }
}
</style>
